<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>乐购首页-爆款</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/see/reset.min.css">
    <link rel="stylesheet" href="/plugins/swiper/swiper4.2.min.css">
    <link rel="stylesheet" href="/css/purchase/burstingActivity.min.css?v=<%=$version%>">
</head>
<body>
<div id="burstingActivity" v-cloak>
    <header class="cityAdHotlist-top">
        <span class="goback" @click="getBack()"></span>
        爆款活动<template v-if="type==2||type==3">详情</template>
        <!--<span class="sear" v-if="type==1||type==0"></span>-->
        <span class="discount-spsre" v-if="type==2||type==3" @click="getNext(8)"></span>
    </header>
    <template v-if="type==1||type==0">
        <aside class="purchase-slider">
            <basic-slide :list="luckyBurst.carousels"></basic-slide>
            <!--<div class="swiper-container">-->
                <!--<div class="swiper-wrapper">-->
                    <!--<div class="swiper-slide">-->
                        <!--<img class="lazy">-->
                    <!--</div>-->
                <!--</div>-->
                <!--&lt;!&ndash; Add Pagination &ndash;&gt;-->
                <!--<div class="swiper-pagination"></div>-->
            <!--</div>-->
        </aside>
        <ul class="activity-tab">
            <template v-for="item in luckyBurst.types">
                <li class="tabActive" v-if="item.sortDate==0" @click="getLuckyBurstList(item)">
                    <strong>抢购中</strong>
                    <span>{{getData(item.beginDate)}}-{{getData(item.endDate)}}</span>
                </li>
                <li :class="{'active':typeId==item.typeId}" v-else @click="getLuckyBurstList(item)">
                    <strong v-if="item.sortDate>0">已结束</strong>
                    <strong v-if="item.sortDate<0">即将开始</strong>
                    <span>{{getData(item.beginDate)}}</span>
                </li>
            </template>
            <!--<li class="active">-->
                <!--<strong>即将开始</strong>-->
                <!--<span>08:00-08:30</span>-->
            <!--</li>-->
        </ul>
    </template>
    <div class="activity-cent" :class="{'activitybg':sortDate>0}">
        <div class="activity-data" v-if="sortDate<0">即将开始</div>
        <div class="activity-data" v-else-if="sortDate>0">已结束</div>
        <div class="activity-data" v-else>距离结束<span class="dataSpan">{{minutes}}</span>:<span class="dataSpan1">{{seconds}}</span></div>
        <div class="activity-goods">
            <div class="coupon-list" @click="getNext(3)">
                <strong class="coupon-lableIcon"></strong>
                <strong class="coupon-txt">{{burstList.discount}}折</strong>
                <!--<strong class="purchase-icon5" v-if="burstList.discount==5"></strong>-->
                <!--<strong class="purchase-icon6" v-if="burstList.discount==6"></strong>-->
                <!--<strong class="coupon-icon3" v-if="burstList.discount==7"></strong>-->
                <!--<strong class="coupon-icon4" v-if="burstList.discount==8"></strong>-->
                <strong class="slide-img" :style="bgimg(burstList.imgSrc)"></strong>
                <h6>{{burstList.title}}</h6>
                <span class="bursting-icon3"></span>
                <p>商品原价：&yen;{{burstList.pintegral}}</p>
                <span>前10名用户可获得此折扣券</span>
            </div>
        </div>
        <div class="activity-explain" @click="getNext(6)">活动说明<span>&gt;&gt;</span></div>
        <div class="burstingInfo" v-if="type==2||type==3">
            <div class="burstingInfo-top">
                <h6>{{user.name}}</h6>
                <strong class="burstingInfo-topHead" :style="bgimg(user.headImg)"></strong>
                <div class="burstingInfo-topRanking">能量:<span>{{user.num}}</span><strong></strong>排名:<span>{{user.ranking}}</span></div>
                <strong class="bursting-icon6" @click="getLuckyBurstByFriend()"></strong>
                <div class="burstingInfo-topSpeed">
                    <strong :style="'width:'+(user.num/burstList.totalNum)+'%' " v-if="burstList.totalNum!=0"></strong>
                    <div>10名<span></span><i></i></div>
                </div>
                <div class="burstingInfo-topBtn" @click="getNext(8)">邀请好友助力</div>
            </div>
            <div class="burstingInfo-title">
                <b @click="getNext(4)">查看助力好友<span>&gt;</span></b>
            </div>
            <div class="burstingInfo-cent">
                <div class="burstingInfo-video">
                    <template v-if="burstList.advs&&burstList.advs.length>0">
                        <div id="my-video" v-if="isNav!=3"></div>
                        <div class="video-mask1 video-mask2" v-show="isflase1" :style="bgimg(coverImgSrc)"></div>
                        <div class="video-mask1" @click="getVideoPlay(2)"></div>
                        <div class="video-mask" :class="{videoShow:isVideo}">
                            <span class="adDetails-qplay" @click="getVideoPlay(1)" v-if="isNav==2"></span>
                            <span class="adDetails-holdonplay" @click="getVideoPlay(3)" v-if="isNav==1"></span>
                        </div>
                    </template>
                    <div v-if="isNav==3||burstList.advs&&burstList.advs.length==0" class="NoVideo">没有更多视频啦</div>
                    <template v-if="num">
                        <span class="burstingInfo-videoData">{{totalTime}}<span>s</span></span>
                        <p>即将播放：{{title}}</p>
                    </template>
                </div>
                <p>温馨提示：看视频可免费获得一定的能量</p>
            </div>
        </div>
        <div class="butt-listCent activity-user" v-if="user&&user.name">
            <strong :style="bgimg(user.headImg)"></strong>
            <h6>{{user.name}}</h6>
            <p>能量值：{{user.num}}</p>
            <span class="userRight" @click="getNext(3,user.orderNumber)" v-if="type==1||type==2">查看详情<span>&gt;</span></span>
        </div>
        <div class="activity-butt">
            <div class="activity-title">能量排行榜<span>共{{burstList.userCount}}人</span></div>
            <ul class="butt-list">
                <li class="butt-listCent" v-for="(item,index) in burstList.list">
                    <strong :style="bgimg(item.headImg)"></strong>
                    <h6>{{item.name}}</h6>
                    <p>能量值：{{item.num}}</p>
                    <span class="bursting-icon5" v-if="item.ranking<11">第{{item.ranking}}名</span>
                </li>
                <!--<li class="butt-listCent">-->
                    <!--<strong></strong>-->
                    <!--<h6>的缴费基数</h6>-->
                    <!--<p>能量值：302</p>-->
                    <!--<span class="bursting-icon5">第几名</span>-->
                <!--</li>-->
            </ul>
        </div>
    </div>
    <div class="activity-btn" v-if="sortDate==0&&type==0&&user!=null" @click="getIsScreen(1)">支付<span>{{burstList.integral}}</span>参与活动</div>
    <div class="activity-btn" v-if="sortDate==0&&type==1&&user!=null" @click="getIsScreen(1)">支付<span>{{burstList.integral}}</span>参与活动</div>
    <div class="activity-btn" v-if="sortDate<0&&user&&user.orderNumber&&type==2" @click="getNext(3,user.orderNumber)">查看获奖详情</div>
    <div class="activity-btn" v-if="sortDate<0&&user&&user.orderNumber&&type==1" @click="getNext(3,user.orderNumber)">查看获奖详情</div>
    <div class="activity-btn" v-if="sortDate==0&&user&&user.orderNumber&&type==1" @click="getNext(3,user.orderNumber)">查看获奖详情</div>
    <div id="mask" @click="getIsScreen()" :class="{'maskShow':isScreen}"></div>
    <div id="newTips" :class="{'maskShow':isScreen==1}">
        <div class="newTips-div">您确定支付吗? </div>
        <div class="newTips-btn clearfix">
            <strong @click="getIsScreen()">取消</strong>
            <strong class="newTips-btnOK" @click="buyLuckyBurst()">确定</strong>
        </div>
    </div>
    <div id="newTips" :class="{'maskShow':isScreen==2}">
        <p><b>支付失败！</b></p>
        <p class="txt24">您当前乐币余额不足，请去充值！</p>
        <div class="newTips-btn clearfix">
            <strong @click="getIsScreen()">取消</strong>
            <strong class="newTips-btnOK" @click="getNext(9)">去充值</strong>
        </div>
    </div>
    <div id="newTips1" :class="{'maskShow':tip==1}">
        <h6>支付成功！</h6>>
        <p>欢迎参与“攒能量免费领”活动！</p>
    </div>
    <div id="newTips2" :class="{'maskShow':tip==2}">
        <h6>助力成功！</h6>>
        <p>您的好友能量值+1</p>
    </div>
    <prompt-view ref="prompt"></prompt-view>
</div>
<script src='/plugins/js/jquery-1.11.3.min.js'></script>
<script type="text/javascript" src="/plugins/js/vue.min.js"></script>
<script type="text/javascript" src="/plugins/js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="/plugins/swiper/swiper.min.4.2.js"></script>
<script type="text/javascript" src="/js/purchase/burstingActivity.js?v=<%=$version%>"></script>
<script>
    var swiper1 = new Swiper(".purchase-slider .swiper-container",{
        spaceBetween: 30,
        centeredSlides: true,
        // autoplay: {
        //     delay: 2500,
        //     disableOnInteraction: false
        // },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 2
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    $("img.lazy").lazyload();
</script>
</body>
</html>